<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维修管理</title>
    <link rel="stylesheet" href="/aaa/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/aaa/layuiadmin/style/admin.css" media="all">
    <script src="/aaa/layuiadmin/layui/layui.js"></script>
</head>

<body>
<!--维修单展示-->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">车主手机号</label>
                    <div class="layui-input-block">
                        <input type="text" id="telephone" name="telephone" placeholder="请输入号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">开始时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="startTime" name="startTime" placeholder="请输入开始时间" autocomplete="off" class="layui-input">
                    </div>
                </div>至
                <div class="layui-inline">
                    <label class="layui-form-label">截止时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="endTime" name="endTime" placeholder="请输入截止时间" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">维修员工：</label>
                    <div class="layui-input-block">
                        <input type="text" id="employeeid" name="employeeid" placeholder="请输入工号" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <button id="research" class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="LAY-user-front-search">
                        <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                    </button>
                    <button type="reset" id="reset" class="layui-btn layuiadmin-btn-useradmin">重置</button>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <div style="padding-bottom: 10px;">
                <button class="layui-btn layuiadmin-btn-useradmin" id="add">添加维修单</button>
            </div>

            <table id="retable" lay-filter="retable-filter"></table>

            <script type="text/html" id="retable-bar">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="detail"><i class="layui-icon layui-icon-read"></i>查看</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
            </script>
        </div>
    </div>
</div>

<!--添加维修单的弹框-->
<div id="addform" style="display: none;">
<form class="layui-form" id="reform" lay-filter="goodsform"><br>
    <div class="layui-form-item">
        <label class="layui-form-label">车主姓名：</label>
        <div class="layui-input-block">
            <input type="text" id="name" name="name" placeholder="请输入车主" autocomplete="off" class="layui-input" style="width:300px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">手机号：</label>
        <div class="layui-input-block">
            <input type="text" id="tel"  name="tel" placeholder="请输入手机号" autocomplete="off" class="layui-input" style="width:300px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">车辆型号：</label>
        <div class="layui-input-block">
            <input type="text" id="carCode"  name="carCode" placeholder="请输入车型" autocomplete="off" class="layui-input" style="width:300px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">购车时间：</label>
        <div class="layui-input-block">
            <input type="text" id="createTime" name="createTime"  autocomplete="off" class="layui-input" style="width:300px;" >
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">故障原因</label>
        <div class="layui-input-block">
            <textarea placeholder="请输入故障描述" id="reason" class="layui-textarea"  style="width:600px;"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">维修费用：</label>
        <div class="layui-input-block">
            <input type="text" id="reprice" name="reprice" placeholder="/元" autocomplete="off" class="layui-input" style="width:300px;">
        </div>
    </div>
    <!--自动获取维修人员  绑定模板-->
    <div class="layui-form-item">
        <label class="layui-form-label">维修人员：</label>
        <div class="layui-input-inline">
            <select name="empid" id="empid" lay-search=""
                    lay-verify="required" lay-filter="empid">
            </select>
        </div>
    </div>
    <!--自动获取仓库的零件信息  绑定模板-->
    <div class="layui-form-item">
        <label class="layui-form-label">零件：</label>
        <div class="layui-input-block" id="goodsid">

        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">零件费用：</label>
        <div class="layui-input-block">
            <input type="text" id="coprice" name="coprice" placeholder="/元" autocomplete="off" class="layui-input" style="width:300px;">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">总费用：</label>
        <div class="layui-input-block">
            <input type="text" id="subTotal" name="subTotal"  autocomplete="off" class="layui-input" style="border:0px;">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="reform" id="reformSubmit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
</div>

<!--查看详情 弹窗的table-->
<div class="layui-fluid"  id="layui-repaird-car"  lay-filter="layui-repaird-car" style="display: none">
    <div class="layui-card">

        <table id="layui-repaird-car-table" lay-filter="layui-repaird-car-table"></table>

    </div>
</div>

<!--维修人员 自动获取模板-->
<script type="text/html" id="emp">
    <option></option>
    {{#  layui.each(d, function(index, item){ }}
    <option value="{{item.employeeid}}">{{item.name}}</option>
    {{#  }); }}
</script>

<!--仓库零件 自动获取模板-->
<script type="text/html" id="component">

    {{#  layui.each(d, function(index, item){ }}
    <input type="checkbox" value="{{item.id}}" name="component" title="{{item.goodsname}}/{{item.goodscost}}元/共{{item.goodsquantity}}个"  lay-skin="primary">
    {{#  }); }}
</script>

<script th:inline="none">
    layui.use( [ 'layer', 'form', 'element', 'table', 'laydate' ], function(){
        var $ = layui.$
            ,form = layui.form
            ,table = layui.table
            ,laydate=layui.laydate
            ,layer=layui.layer
            ,element=layui.element
            ,laytpl = layui.laytpl
        form.render();
        //table 展示所有的维修单
        table.render({
            elem: '#retable'
            , height: 600
            , url: '/aaa/repair/findRepairInfo' //数据接口
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'repairid', title: '维修单号', sort: true, align: 'center'},
                {field: 'telephone', title: '车主号码', align: 'center'},
                {field: 'carcode', title: '车辆型号', align: 'center'},
                {field: 'ename', title: '维修员工', align: 'center'},
                {field: 'total', title: '消费总额', align: 'center'},
                {field: 'createtime', title: '维修时间', align: 'center'},
                {title: '操作', toolbar: '#retable-bar', align: 'center'}
            ]]
        });

        //添加维修单，弹框--显示form表单
        $('#add').on('click', function(){

            layer.open({
                type: 1
                ,title: '添加维修单'
                ,content: $('#addform')
                ,maxmin: true
                ,area: ['800px', '700px']
                ,btn:  '取消'
                ,yes: function(index, layero){
                    layer.close(index);
                },end:function(){
                    window.location.reload();
                }
            });

        });
        //添加弹框内的事件--根据name查询车主信息
        $('#name').blur(function () {

            var name=$("#name").val();

            $.post({
                url:'/aaa/repair/findCustomerInfo',
                data:{
                    name:name
                }
            },function (data) {
                if (data!=''){
                    $('#tel').val(data.telephone);
                    $('#carCode').val(data.carcode);
                    $('#createTime').val(data.selltime);
                } else{
                    layer.msg('您查询的车主信息不存在！！！');
                }
            })

        });
        //添加弹框内的事件--根据tel查询车主信息
        $('#tel').blur(function () {

            var tel=$("#tel").val();

            $.post({
                url:'/aaa/repair/findCustomerInfoByTel',
                data:{
                    tel:tel
                }
            },function (data) {
                if (data!=''){
                    $('#name').val(data.name);
                    $('#carCode').val(data.carcode);
                    $('#createTime').val(data.selltime);
                } else{
                    layer.msg('您查询的车主信息不存在！！！');
                }
            })

        });
        //添加弹框内的事件--根据carcode查询车主信息
        $('#carCode').blur(function () {

            var carCode=$("#carCode").val();

            $.post({
                url:'/aaa/repair/findCustomerInfoByCarcode',
                data:{
                    carcode:carCode
                }
            },function (data) {

                  if (data!=''){
                      $('#name').val(data.name);
                      $('#tel').val(data.telephone);
                      $('#createTime').val(data.selltime);
                  } else{
                      layer.msg('您查询的车主信息不存在！！！');
                  }

            })

        });
        //维修费用失焦事件---总费用变化
        $('#reprice').blur(function () {
            var reprice = $("#reprice").val();
            var coprice = $("#coprice").val();
            $("#subTotal").val(Number(reprice)+Number(coprice));
        });
        //零件费用失焦事件---总费用变化
        $('#coprice').blur(function () {
            var reprice = $("#reprice").val();
            var coprice = $("#coprice").val();
            $("#subTotal").val(Number(reprice)+Number(coprice));
        });
        //维修员工自动加载
        $.ajax(
            {
                type : "post",
                url : "/aaa/repair/listEmp", //接口路径
                dataType : "json",
                async : false,
                success : function(data) {

                    var demo = $('#emp');
                    var getTpl = demo.html(),
                        view = $('#empid');
                    laytpl(getTpl).render(data, function(html) {

                        view.html(html);
                    });
                    form.render();
                },
                error : function(result, status) {}
            });
        //仓库零件自动加载
        $.ajax(
            {
                type : "post",
                url : "/aaa/repair/listComponent", //接口路径
                dataType : "json",
                async : false,
                success : function(data) {

                    var demo = $('#component');
                    var getTpl = demo.html(),
                        view = $('#goodsid');
                    laytpl(getTpl).render(data, function(html) {

                        view.html(html);
                    });
                    form.render();
                },
                error : function(result, status) {}
            });
        //添加维修单的提交

        $("#reformSubmit").click(function () {

            var telephone=$("#tel").val();
            var carcode=$("#carCode").val();
            var reason=$("#reason").val();
            //维修费用
            var reprice=$("#reprice").val();
            //零件费用
            var coprice=$("#coprice").val();
            //维修人员
            var eid=$("#empid").val();
            //总费用
            var total=Number(reprice)+Number(coprice);

            //获取checkbox[name='component']的值goodsid
            var result =[];
            $("[name='component']:checkbox").each(function() {
                if ($(this).is(":checked")) {
                    result.push($(this).attr("value"));
                }
            });
             result.join(",");

            //发起添加维修单的请求
            $.ajax(
                {
                    type : "post",
                    url : "/aaa/repair/addRepairInfo", //接口路径
                    dataType : "json",
                    data:{
                        telephone:telephone,
                        carcode:carcode,
                        reason:reason,
                        reprice:reprice,
                        coprice:coprice,
                        employeeid:eid,
                        total:total,
                        arr:result
                    },
                    async : false,
                    success : function(data) {
                       console.log(data.message);
                    },
                    error : function(result, status) {
                        console.log(result);
                    }
                });

        })

        //表格操作
        table.on('tool(retable-filter)', function(obj){
            var data = obj.data;

            //查看维修单，弹框--显示详表
            if(obj.event === 'detail'){

                layer.open({
                    type: 1
                    , title: '查看维修详情'
                    , content: $('#layui-repaird-car')
                    , maxmin: true
                    , area: ['1300px', '700px']
                    , btn: ['取消']
                    , yes: function (index, layero) {
                        layer.close(index); //关闭弹层
                    }
                });

                //table 展示维修单的详表
                table.render({
                    elem: '#layui-repaird-car-table'
                    , height:500
                    , url: '/aaa/repair/findRepairInfoById'
                    ,where:{repairid:data.repairid}
                    , cols: [[ //表头
                        {field: 'repairid', width: 150, title: '维修单号', align: 'center'},
                        {field: 'telephone', width: 150, title: '车主号码', align: 'center'},
                        {field: 'uname', width: 80, title: '车主姓名', align: 'center'},
                        {field: 'selltime', width: 180, title: '购车时间', align: 'center'},
                        {field: 'carcode', width: 100, title: '车辆型号', align: 'center'},
                        {field: 'reason', width: 100, title: '故障原因', align: 'center'},
                        {field: 'ename', width: 100, title: '维修员工', align: 'center'},
                        {field: 'retime', width: 180, title: '维修时间', align: 'center'},
                        {field: 'expensetype', width: 100, title: '消费类型', align: 'center'},
                        {field: 'goodsid', width: 100, title: '商品id', sort: true, align: 'center'},
                        {field: 'goodsname', width: 100, title: '商品名', align: 'center'},
                        {field: 'expensecost', width: 80, title: '价格/元', align: 'center'},
                        {field: 'total', width: 80, title: '总额', align: 'center'},
                    ]]
                });
            } else if(obj.event === 'delete'){

                layer.confirm('确定删除该行数据？', function(index){
                    $.post({
                        url:'/aaa/repair/delRepairInfoById',
                        data:{
                            repairid:data.repairid//传入订单号参数
                        },
                    },function (result) {
                        obj.del();
                        layer.close(index);
                        window.location.reload();
                        layer.alert(result.msg, {//提示框 提示删除返回的信息
                            icon: 1,
                            skin: 'layer-ext-moon',
                            time: 3000//三秒消失
                        })
                    })
                });

            }
        });
        //搜索功能
        $('#research').click(function () {
            table.reload('retable', {
                url: '/aaa/repair/findRepairInfo',
                where: {
                    telephone:$("#telephone").val()
                    ,startTime:$("#startTime").val()
                    ,endTime:$("#endTime").val()
                    ,employeeid:$("#employeeid").val()
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        })
        //重置
        $("#reset").click(function(){
            location.reload();
        });
        //验证搜索条件 时间的最大值，最小值
        var nowTime = new Date().valueOf();
        var startTime= laydate.render({
            elem: '#startTime'
            ,type: 'datetime'
            //设置一个默认最大值  
            ,max:nowTime
            ,
            done: function (value, dates) {
                endTime.config.min ={
                    year:dates.year,
                    month:dates.month-1, //关键 
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                };
            }
        });
        //渲染结束时间选择 
        var endTime= laydate.render({
            //通过id绑定html中插入的end 
            elem: '#endTime',
            type: 'datetime',
            //设置min默认最小值 
            min:nowTime,
            done: function (value, dates) {
                startTime.config.max={
                    year:dates.year,
                    month:dates.month-1,//关键  
                    date: dates.date,
                    hours: 0,
                    minutes: 0,
                    seconds : 0
                }
            }
        });

    });


</script>
</body>
</html>